<template>
	<div class="count-down">
    <div  class="time-count" v-if="type==1">
      <span :style="{'color':background}" class="num day">{{countDownList.day}}</span>
      <span :style="{'color':background}" class="pot day">天</span>
      <span :style="{'background':background,'color':color}" class="num">{{countDownList.hour}}</span>
      <span :style="{'color':background}" class="pot">:</span>
      <span :style="{'background':background,'color':color}" class="num">{{countDownList.minute}}</span>
      <span :style="{'color':background}" class="pot">:</span>
      <span :style="{'background': secondBackground ? secondBackground :background,'color':secondColor ? secondColor : color}" class="num">{{countDownList.second}}</span>
    </div>

    <div  class="time-count" v-else-if="type==2">
      <span :style="{'color':background}" class="num day">{{countDownList.day}}</span>
      <span :style="{'color':background}" class="pot day">天</span>
      <span :style="{'background':background,'color':color}" class="num">{{countDownList.hour}}</span>
      <span :style="{'color':background}" class="pot day">时</span>
      <span :style="{'background':background,'color':color}" class="num">{{countDownList.minute}}</span>
      <span :style="{'color':background}" class="pot day">分</span>
      <span :style="{'background':background,'color':color}" class="num">{{countDownList.second}}</span>
      <span :style="{'color':background}" class="pot day">秒</span>
    </div>


    <div  class="time-count" v-else-if="type==3"> 
      <span :style="{'background':background,'color':color}" class="num" :class="!round?'notRadius':''">{{countDownList.day}}</span>
      <span :style="{'color':background}" class="pot day">天</span>
      <span :style="{'background':background,'color':color}" class="num" :class="!round?'notRadius':''">{{countDownList.hour}}</span>
      <span :style="{'color':background}" class="pot day">时</span>
      <span :style="{'background':background,'color':color}" class="num" :class="!round?'notRadius':''">{{countDownList.minute}}</span>
      <span :style="{'color':background}" class="pot day">分</span>
      <span :style="{'background':background,'color':color}" class="num" :class="!round?'notRadius':''">{{countDownList.second}}</span>
      <span :style="{'color':background}" class="pot day">秒</span>
    </div>

	</div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2019-12-11 10:34:52
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2019-12-11 10:34:57
   */
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    props: {
      actEndTime: {
        type: String
      },
      background: {
        type: String,
        default: '#FE1B49'
      },
      color: {
        type: String,
        default: '#fff'
      },
      secondColor: {
        type: String,
        default: ''
      },
      secondBackground: {
        type: String,
        default: ''
      },
      type: {
        tpye: Number,
        default: 1
      },
      round: {
        type: Boolean,
        default: true
      },

      random: {
        tpye: Number,
        default: 1
      }
    },
    data() {
      return {
        countDownList: {
          day: '00', // 天
          hour: '00', // 时
          minute: '00', // 分
          second: '00' // 秒
        },
        interval: null
      }
    },
    created() {
      this.setIntervalTime() // 调取倒计时
    },
    beforeDestroy() { // 组件的销毁
      clearInterval(this.interval) // 清除定时器
      this.interval = null
    },
    methods: {
      // 设置定时器做倒计时
      setIntervalTime() {
        this.interval = setInterval(() => {
          this.countDownList = this.getResidueTime(this.actEndTime)
        }, 1000)
      },
      // 获取剩余时间
      getResidueTime(end) {
        let totalSeconds = 0
        if (end) {
          const nowtime = new Date().getTime() // 当前时间 毫秒数
          if (end.indexOf('-') == -1) {
            totalSeconds = (Number(end) * 1000 - nowtime) / 1000 // 结束时间-当前时间 = 剩余多少时间
          } else {
            const endTime = Date.parse(new Date(end.replace(/-/g, '/'))) // 结束时间  毫秒数
            totalSeconds = (endTime - nowtime) / 1000 // 结束时间-当前时间 = 剩余多少时间
          }
        }
        let day = 0
        let hour = 0
        let minute = 0
        let second = 0
        if (totalSeconds > 0) {
          day = parseInt(totalSeconds / 3600 / 24) // 天
          hour = parseInt((totalSeconds / 3600) % 24) // 时
          minute = parseInt((totalSeconds / 60) % 60) // 分
          second = parseInt(totalSeconds % 60) // 秒
        } else {
          day = 0 // 天
          hour = 0 // 时
          minute = 0 // 分
          second = 0 // 秒
          clearInterval(this.interval)
          this.$emit('finish')
        }
        hour = this.addZero(hour)
        minute = this.addZero(minute)
        second = this.addZero(second)

        const residueTime = {
          day: day, // 天
          hour: hour, // 时
          minute: minute, // 分
          second: second // 秒
        }
        return residueTime
      },
      // 补齐格式不满10加0
      addZero(n) {
        return n < 10 ? '0' + n : n
      }
    }
  })
</script>
<style lang="scss">
.count-down{
  .time-count{
    display:flex;
    align-items:center;
    span{
      font-size: 22px;
      &.num{
        // background: #FE1B49;
        color: #fff;
        line-height: 40px;
        width: 36px;
        text-align: center;
        border-radius: 6px;
        &.notRadius{
          border-radius: 0;
        }
        &.day{
          background: transparent;
          // color: #FE1B49;
        }
      }
      &.pot{
        margin: 0 5px;
        // color: #FE1B49;
        &.day{
          margin:0 6px 0 4px;
        }
      }
    }
  }
}
</style>
